<template>
	<view class="pageContainer">
		<!-- <div class="pageHeader">
			<uni-nav-bar background-color="#39A6FF" :border="false" color="#fff" title="更多"></uni-nav-bar>
		</div>
		<div class="pageHeaderPlace"></div> -->


		<div class="bannerBox">
			<!-- <image class="logo" style=" display: block;" mode="aspectFill" src="../../static/logo.png"></image>

			<view class="title">
				法医检验鉴定标准<br />V2.0.1
			</view> -->
			<image class="bg" style=" display: block;" mode="aspectFill" src="../../static/more/bg.png"></image>
			<view class="box">
			<image class="logo" style=" display: block;" mode="aspectFill" src="../../static/more/logo.png"></image>
			<view class="title">
				法医检验鉴定标准
			</view>
			</view>
		</div>

		<view class="listBox">
			<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
			<view class="item" @click="goPage('/pages/more/resume')">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon1.png"></image>
				</view>
				<text class="text">内容提要</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
	
			<picker class="headerPicker" @change="bindPickerChange" :value="index" :range="array">
			<view class="item">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon2.png"></image>
				</view>
				<text class="text">字体大小</text>
				<view class="icon">
					<text style="color: #333;">{{array[index]}}</text>
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
			</picker>
			<view class="item" @click="goPage('/pages/more/desc')">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon3.png"></image>
				</view>
				<text class="text">使用说明</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
			<view class="item" @click="goPage('/pages/more/declare')">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon4.png"></image>
				</view>
				<text class="text">软件声明</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
			<view class="item" @click="goPage('/pages/more/opinion')">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon5.png"></image>
				</view>
				<text class="text">意见反馈</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>

			<view class="item" @click="goPage('/pages/more/contract')">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon6.png"></image>
				</view>
				<text class="text">联系方式</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>

			<view class="item" @click="showVersion">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon7.png"></image>
				</view>
				<text class="text">版本</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
			
			<view class="item" @click="goPage('/pages/more/userAgree')">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon11.png"></image>
				</view>
				<text class="text">用户协议</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
			<view class="item" @click="goPage('/pages/more/privacy')">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon10.png"></image>
				</view>
				<text class="text">隐私协议</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
			
			<view class="item" @click="logoffUser" v-if="token">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon8.png"></image>
				</view>
				<text class="text">注销用户</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>

			<view class="item" @click="logout" v-if="token">
				<view class="imgBox">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon9.png"></image>
				</view>
				<text class="text">退出登录</text>
				<view class="icon">
					<image class="img" style=" display: block;" mode="aspectFill" src="../../static/more/icon.png"></image>
				</view>
			</view>
			
			<view v-if="!token" style=" margin: 0 auto; padding: 15px;" @click="onLogin">
				<button type="primary" style="background-color: #39A6FF;">登录</button>
			</view>

		</view>


		<pageTabbar :page="3"></pageTabbar>
	</view>
</template>

<script>
	import {
		APIJS
	} from '../../api/api.js'
	import {
		goLogin
	} from '@/utils/utils.js'
	import pageTabbar from '../../components/pageTabbar.vue'
	export default {
		components: {
			pageTabbar
		},
		data() {
			return {
				array: ['小号', '默认', '中号', '大号'],
				arraySize: ['14', '16','18', '22'],
				index: 1,
			}
		},
		computed: {
			token() {
				return uni.getStorageSync('token') || ''
			}
		},
		mounted() {
			// let token = uni.getStorageSync('token')
			// if (!token) {
			// 	goLogin('/pages/more/more')
			// 	return
			// }
			
			this.index = uni.getStorageSync('fontSizeIndex') ? uni.getStorageSync('fontSizeIndex') : 1
		},
		methods: {
			
			onLogin() {
				goLogin('/pages/more/more', 'navigateTo')
			},

			goPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			bindPickerChange(obj) {
				this.index = obj.detail.value
				uni.setStorageSync('fontSizeIndex', this.index)
			},

			showVersion() {
				uni.showToast({
					title: '当前版本：V2.0.1',
					duration: 3000,
					icon: 'none'
				});
			},

			loginSuccess() {

			},
			// 注销用户
			logoffUser() {
				uni.showModal({
				  title: '提示',
				  content: '确认要注销当前用户吗？',
				  success: function (res) {
				    if (res.confirm) {
				      APIJS.delUser({}).then(() => {
				      	uni.reLaunch({
				      		url: '/pages/index/index'
				      	});
				      })
				    } else if (res.cancel) {
				      console.log('用户点击取消');
				    }
				  }
				});
			},

			logout() {
				APIJS.loginOut({}).then(() => {
					uni.setStorageSync('token', '')
					uni.setStorageSync('phone', '')
					goLogin('/')
					uni.showToast({
						title: '退出登录成功！',
						duration: 3000,
						icon: 'success'
					});
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.pageContainer{
		background-color: #E7F4FF;  min-height: 100vh;
	}
	
	
	.bannerBox {
		width: 100%; position: relative;
		
	    .bg{
			width: 100%;
		}
		
		.box{
			position: absolute; top: 0; left: 0; width: 100%; z-index: 9;
			.logo {
				width: 100px; 
				height: 100px;
				margin: 70px auto 0;
			}
			
			.title {
				font-size: 20px;
				text-align: center;
				color: #fff;
				font-weight: bold;
				padding-top: 10px;
			}
		}
	}


	.listBox {
		margin: 12px 15px 0; 
		.item {
			border-bottom: 1px solid #ebeef5; background-color: #fff; margin-bottom: 5px;
			line-height: 20px;
			font-size: 16px;
			display: flex;
			padding: 5px 20px 5px 10px;
			align-items: center;
			color: #1D2129;
			justify-content: space-between;

			&:active {
				background-color: #f5f5f5;
			}

			.imgBox {
				width: 36px;
				height: 36px;
				margin-right: 10px;
				.img{
					width: 36px;
					height: 36px;
				}
			}

			.text {
				flex: 1;
				padding-right: 10px;
			}

			.icon {
				width: auto; 
				width: 100px;
				height: 32px; line-height: 32px;
				 display: flex; justify-content: flex-end; 
				.img{
					width: 32px; margin-left: 10px;
					height: 32px;
				}
			}
		}
	}
</style>
